<template>
  <div>
    <el-popover ref='columnSettingPopover' :width="width" placement="bottom-end" trigger="click">
      <template #reference>
        <el-button type="" :icon="Setting" circle/>
      </template>
      <div class="checkBox">
        <div class="checkAll">
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选
          </el-checkbox>
        </div>
        <div class="checkInfo">
          <el-checkbox-group v-model="checkedColumns" @change="handleCheckedColumnsChange">
            <el-checkbox v-for="item in modelValue" :key="item.value" :label="item.value" style="width: 100%;">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <p class="checkBtn">
          <span @click="handleSure">确定</span>
          <span @click="handleReduction">还原</span>
        </p>
      </div>
    </el-popover>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, watch} from "vue";
import {Setting} from '@element-plus/icons-vue'

const {proxy} = getCurrentInstance()
const props = defineProps({
  width: {
    type: Number,
    default: 150
  },
  modelValue: {
    type: Array,
    default: () => []
  },
  defaultCheckVals: {
    type: Array,
    default: () => []
  }
});
const emits = defineEmits(['update:modelValue']);
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedColumns = ref([])
watch(
    () => props.defaultCheckVals,
    (val) => {
      checkedColumns.value = val
    },
    {immediate: true, deep: true}
)
const handleCheckAllChange = (val) => {
  checkedColumns.value = val ? props.modelValue.map(item => item.value) : []
  isIndeterminate.value = false
}
const handleCheckedColumnsChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === props.modelValue.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < props.modelValue.length
}

function handleSure() {
  setColumns()
}

function handleReduction() {
  checkedColumns.value = props.defaultCheckVals
  setColumns()
}

function setColumns() {
  const sureColumns = props.modelValue.map(item => {
    return {
      ...item,
      show: checkedColumns.value.includes(item.value)
    }
  })
  emits('update:modelValue', sureColumns)
  proxy.$refs.columnSettingPopover.hide()
}
</script>

<style scoped lang="scss">
.checkBox {
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.12) 0 0 12px 0;
  left: 0;
  top: 0;
  background-color: #fff;

  .checkAll {
    display: flex;
    height: 40px;
    align-items: center;
    padding-left: 10px;
    box-shadow: rgba(0, 0, 0, 0.12) 0 0 12px 0;
  }

  .checkInfo {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px;
  }

  .checkBtn {
    display: flex;
    margin: 0;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    box-shadow: rgba(0, 0, 0, 0.12) 0 0 12px 0;

    span {
      flex: 1;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
